<template>
<div class="editor-container">
 <a-layout>
    <a-layout-header class="header">
      <div class="page-title">
        <router-link to="/">
        慕课乐高
          <!-- <img alt="慕课乐高" src="../assets/logo-simple.png" class="logo-img"> -->
        </router-link>
        inline-edit
        <!-- <inline-edit :value="page.title" @change="titleChange"/> -->
      </div>
      <a-menu
        :selectable="false"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          <a-button type="primary" @click="preview">预览和设置</a-button>
        </a-menu-item>
        <a-menu-item key="2">
          <a-button type="primary" @click="saveWork" :loading="saveIsLoading">保存</a-button>
        </a-menu-item>
        <a-menu-item key="3">
          <a-button type="primary" @click="publish" :loading="isPublishing">发布</a-button>
        </a-menu-item>
        <a-menu-item key="4">
          <!-- <user-profile :user="userInfo"></user-profile> -->
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </a-layout>
    <a-layout style="padding: 0 24px 24px">
      <a-layout-sider width="300" style="background: #fff">
      <div class="sidebar-container" style="background: #fff">
        组件列表
        <components-list 
        :list="defaultTextTemplate" 
        @onItemClick="addItem"/>
        <img id="test-image" :style="{ width: '300px' }"/>
      </div>
    </a-layout-sider>
    <a-layout-content class="preview-container"  style="padding: 0 24px 24px">
        <p>画布区域</p>
        <!-- <history-area></history-area> -->
        <div 
        class="preview-list" 
        id="canvas-area" 
        :class="{'canvas-fix': canvasFix}">
          <div class="body-container" 
          :style="page?.props"
          >
          <edit-wrapper 
            @setActive="setActive"
            @update-position="updatePosition"
            v-for="component in components"
            :key="component.id"
            :id="component.id"
            :hidden="component.isHidden"
            :props="component.props"
            :active="component.id === (currentElement && currentElement.id)"
          >
            <component 
              :is="component.name"
              v-bind="component.props"
            />
          </edit-wrapper>
          </div>
        </div> 
      </a-layout-content>
       <a-layout-sider width="300" style="background: #fff" class="settings-panel">
      
       <!-- @change="pageChange" -->

      <a-tabs type="card" v-model:activeKey="activePanel">
        <a-tab-pane key="component" tab="属性设置" class="no-top-radius">
          <div v-if="currentElement">
          属性设置
           <!-- <edit-group
            v-if="!currentElement.isLocked"
            :props="currentElement.props"
            @change="handleChange"
          ></edit-group>
          <div v-else> 
            <a-empty>
              <template #description>
                <p>该元素被锁定，无法编辑</p>
              </template>
            </a-empty>
          </div> -->
          </div>
           <props-table 
           @change="handleChange"
           :props="currentElement && currentElement.props"></props-table>
          <pre>
            {{currentElement && currentElement?.props}}
          </pre>
        </a-tab-pane>
        <a-tab-pane key="layer" tab="图层设置">
        图层设置
           <layer-list
            :list="components"
            :selectedId="currentElement && currentElement.id"
            @change="handleChange"
            @select="setActive"
          >
          </layer-list>  
        </a-tab-pane>
        <a-tab-pane key="page" tab="页面设置">
          <props-table :props="page.props" @change="pageChange"></props-table>
        </a-tab-pane>
      </a-tabs>
    </a-layout-sider>  
    </a-layout>
</div>
  
</template>
<script lang="ts">
import { defineComponent, computed,  } from 'vue'
import {useStore} from 'vuex'
import LText from '../components/LText.vue'


import { GlobalDataProps } from '../store/index'
import ComponentsList from '../components/ComponentsList.vue'
import defaultTextTemplate  from '../defaultTemplates'
import EditWrapper from '../components/EditWrapper.vue'
import {ComponentData} from '../store/editor'
import PropsTable from '../components/PropsTable.vue'
export default defineComponent({
  components:{
     ComponentsList,
     EditWrapper,
     LText,
     PropsTable
  },
  setup(){
   const store = useStore<GlobalDataProps>()
    console.log(store.state.editor.components,'=store.state.editor')
    const components = computed(() => store.state.editor.components)
    const currentElement = computed<ComponentData | null>(() =>  store.getters.getCurrentElement)
    const addItem = (props: any) => {
       store.commit('addComponent', props)
    } 
    const setActive = (id: string) => {
        store.commit('setActive', id)
    }

    const handleChange = (e: any) => {
       store.commit('updateComponent', e)
    }
    console.log(defaultTextTemplate,'defaultTextTemplates===',store.state.editor.components)
    return {
      components,
      defaultTextTemplate,
      addItem,
      setActive,
      currentElement,
      handleChange
    }
  }
 
})
</script>
<style>
.editor-container .preview-container {
  padding: 24px;
  margin: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.editor-container .preview-list {

}
.page-title {
  display: flex;
}
.page-title .inline-edit span {
  font-weight: 500;
  margin-left: 10px;
  font-size: 16px;
}
.preview-list.canvas-fix .edit-wrapper > * {
  box-shadow: none !important;
}
.preview-list.canvas-fix {
  position: absolute;
  max-height: none;
}
</style>
